To anyone interested, it was very easy to add the rotation handle.
As posted above, the following code is wrong:
_handles[9].point = new Point(r.x + r.width / 2, r.y + r.height + 15);
It should be:
_handles[9].point = new Point(r.x + r.width / 2, r.y + r.height);
I wanted the handle to be 15 px below the box, but it turns out, this was the core of the problem and was what was causing the handle to drift.
To just to recap, to add a single rotation handle that is fixed to the bottom of the bounding box, do the following (I may have forgotten something, but this will at least get you on the right track):
To function plotHandles, add the following at the end:
_handles[9].point = new Point(r.x + r.width / 2, r.y + r.height); //far bottom (rotate)
In function initSelection, add the following, just after the other similar declarations:
createHandle("fb", "other", -90, 0, "fb"); // far bottom, rotate
And finally, add the following to function redrawHandles. It should appear in the if function (in the for) that starts with "if (_handles.type == "corner" )"
} else if (_handles[i].type == "other") {
r = _handles[i].rotationHandle;
rx = ry = -halfH - 2;
r.graphics.clear();
r.graphics.lineStyle(1, _lineColor, 1);
r.graphics.lineTo( 0, 15 );
r.graphics.lineStyle(0, _lineColor, 0);
r.graphics.beginFill(_lineColor, 1);
r.graphics.drawEllipse(rx, ry+15, _handleSize + 4, _handleSize + 4);
r.graphics.endFill();
}
That draws a fixed handle at the bottom of the box, and includes my own custom hardcoded values which you will probably want to change.
I also changed the if to be "if (_handles.type == "corner" && 1 == 0 )" to disable the normal rotation handles.
Next, to figure out how I can change the cusor to a full rotation icon when hovering over the icon... or at the very least, the opposite direction.